<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>test</title>
 <style>
 
 </style>
 <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
 <link rel="stylesheet" href="css/public.css" media="all">
 <script src="lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
 <script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
</head>
<body>
    <form class="layui-form"  action="">
        <div class="form-select">
            <select class="selectName" lay-filter="selectName">
                <option value="0">所有用户</option>
                <option value="1">VIP用户</option>
                <option value="2">普通用户</option>
            </select>
        </div>
        <div class="form-search">
            <input type="text" placeholder="按用户名搜索" class="searchName">
            <i class="searchBtn iconfont icon-fangdajing" alt="" >aaa</i>
        </div>
        <table id="user-table" class="layui-hide" lay-filter="user"></table>
        <script type="text/html" id="table-bar">
               <a lay-event="del">删除</a>|
               <a lay-event="gotoPage">查看详情</a>
        </script>
        </form>
        <script>
                    var userTable
                    var options = {
                        elem: '#user-table',
                        //headers: {
                               // 'Authorization':token  //通信中的token传递
                       // },
                        page:true,//默认开启分页
                        request:{
                            'limitName':'pageSize' //分页每页条数默认字段改为pageSize
                        },
                            //url:  'http://localhost:3050/api/test.json',
                        cols: [[  // 表格的表头
                            {field:'username', title: '用户名'}
                            ,{field:'nickname', title: '昵称', sort: true}
                            ,{field:'right', title: '操作', toolbar:"#table-bar"}
                        ]],
                        data: [
		{
			"username": "F10006",
            "nickname":"1"
		}, {
			"username": "F10003",
            "nickname":"2"
		}, {
			"username": "F10004",
            "nickname":"4"
		}
	],
                        parseData:function(res){
                            //这个函数非常实用，是2.4.0版本新增的，当后端返回的数据格式不符合layuitable需要的格式，用这个函数对返回的数据做处理，在2.4.0版本之前，只能通过修改table源码来解决这个问题
                            return {
                                code:0,
                                msg:"",
                                count:4, //总页数，用于分页
                                data:res.data.userList
                            }
                           }
                    }
                    layui.use('table',function(){
				var lTable = layui.table;
					userTable = lTable.render(options) 
                    lTable.on('tool(user)',function(obj){
		            console.log(obj) //你会看到obj包含了你所需要的所有数据
		            if(obj.event == 'del'){
		                layer.confirm('您确定要删除该用户：' + obj.data.username + '吗？', {
		                    title:'删除用户',
		                    btn: ['确定','取消']
		                }, function(index){
		                	ajax().then(function(){
		                		layer.close(index)
		                		userTable.reload({
	                                page:{
	                                    curr:1   //表格重载的时候将查询页数设为第一页
	                                }
	                            })
		                	}) 
		                })
		            }else if(obj.event == 'gotoPage'){
						location.href = '/userDeatil.html?userid=' + obj.data.id
					}
		        })
			})
            $(document).on('click','.searchBtn',function () {
	        userTable.reload({
	            where:{
					search_arg:$('.searchName').val().trim()
	            },
	            page:{
		            curr:1
		        }
	        })
	    });
		$(document).keyup(function(event){
	        if(event.keyCode == 13)
	        	event.preventDefault()
	            $(".searchBtn").trigger("click");
	    });
        </script>
    </body>
</html>